<template>
  <div class="slotStudy">
    <div class="box_1">
      <son1>我是默认插槽的内容</son1>
    </div>
    <div class="box_2">
      <son1>
        <template v-slot:header="slotprops">
          <span>我是作用域插槽的内容</span>
          <span>{{ slotprops.data }}</span>
        </template>
      </son1>
    </div>
    <div class="box_3">
      <son1>
        <template #footer>
          <span>我是具名插槽的内容</span>
        </template>
      </son1>
    </div>
  </div>
</template>

<script setup lang="ts">
import son1 from "./components/son1.vue";
</script>

<style scoped lang="scss">
.slotStudy {
  display: flex;
  flex-wrap: wrap;
}
.box_1 {
  background: red;
  height: 200px;
  width: 400px;
}
.box_2 {
  background: green;
  height: 200px;
  width: 400px;
}
.box_3 {
  background: yellow;
  height: 200px;
  width: 400px;
}
</style>
